<template>
  <!-- Vue autocomplete 自动补全挺好玩的，有空试试 -->
  <div class="transfer-operation">
    <div class="transfer">
      <el-button type="primary" @click="openDialog">新增变动</el-button>
      <transfer-dialog :dialogState="dialogTransfer"
                       :row="transferForm"
                       :depts="depts"
                       :formLabelWidth="'80px'"
                       :dropLabelWidth="'80px'"></transfer-dialog>
    </div>
    <my-search></my-search>
  </div>
  <div class="transferTable">
    <el-table ref="multipleTableRef"
              :data="curData"
              border
              style="width: 90%; max-height: 400px;"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column property="workerId" label="编号" width="140"></el-table-column>
      <el-table-column property="name" label="姓名" width="100"></el-table-column>
      <el-table-column property="formerDept" label="前部门" width="135"></el-table-column>
      <el-table-column property="formerPost" label="前岗位" width="131"></el-table-column>
      <el-table-column property="curDept" label="现部门" width="135"></el-table-column>
      <el-table-column property="curPost" label="现岗位" width="131"></el-table-column>
      <el-table-column property="transferDate" label="变动时间" width="160"></el-table-column>
      <!--<el-table-column fixed="right" label="操作" width="118">
        <template #default="scope">
          <el-button link type="primary"
                     size="small"
                     @click="handleClick">编辑
          </el-button>
          <el-button link type="primary"
                     size="small">删除
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <my-pagination :totalSize="totalSize"
                   :pageSize="$store.state.pageSize"
                   :cur="cur"
                   :totalPage="totalPage"></my-pagination>
  </div>
</template>

<script>
  import TransferDialog from '@/components/dialogs/transferDialog/TransferDialog'
  import MySearch from '@/components/mySearch/MySearch'
  import MyPagination from '@/components/myPagination/MyPagination'
  import {myMixin} from "../../../plugins/mixin";
  import {getNowDate} from "../../../plugins/utils";

  export default {
    name: "Transfer",
    mixins: [myMixin],
    data() {
      return {
        dialogTransfer: false,
        transferForm: {
          name: "",
          workerId: "",
          formerDept: "",
          formerPost: "",
          curDept: "",
          curPost: "",
          transferDate: getNowDate()
        }
      }
    },
    methods: {
      handleSelectionChange() {
        console.log()
      },
      /* 根据员工姓名搜索 */
      async search(name) {
        let result = await this.$request("/transfer/search", {
          name
        });
        this.tableData = result.data;
        this.changePage(1);
      },
      /* 打开对话框 */
      openDialog() {
        this.dialogTransfer = true;
      },
      /* 展示所有变动信息 */
      async showTransfers() {
        const result = await this.$request('/transfer/list');
        this.tableData = result.data;
      },
      /* 新增变动 */
      async addTransfer(row) {
        console.log(row);
        let str1 = this.$qs.stringify(row);
        let res = await this.$request('/employee/updatedeptorpost?', {
          dept: row.curDept,
          post: row.curPost,
          workerId: row.workerId
        });

        console.log(res);
        await this.$request('/transfer/dotransfer?'+str1);
        await this.showTransfers();
        this.changePage(1);
        this.dialogTransfer = false;
      }
    },
    components: {
      MySearch,
      MyPagination,
      TransferDialog
    },
    async mounted() {
      console.log('Transfer.vue created!');
      this.getDepts();
      await this.showTransfers();
      this.curData = this.tableData.slice(0, this.pageSize);
      // MyPagination
      this.$bus.on("changePageNumber", (cur) => {
        console.log(cur);
        this.changePage(cur);
      });
      // MySearch
      this.$bus.on("searchByName", (name) => {
        this.search(name);
      });
      // MyDialog
      this.$bus.on("confirmOperation", (row) => {
        this.addTransfer(row);
      });
      this.$bus.on('changeDialogState', () => {
        this.dialogTransfer = false;
      });
    }
  }
</script>

<style scoped>
  .headerSearch {
    margin-top: -8px;
    margin-left: 30px;
  }

  .transfer-operation {
    display: flex;
    justify-content: space-between;
    padding: 0 80px 0 30px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .transferTable {
    margin-left: 30px;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-right: 100px;
  }

  .el-pagination {
    --el-pagination-button-bg-color: #ffffff;
  }
</style>